<template>
    <div class="student">
        <h4>我是Student组件</h4>
        <h5>{{msg}}</h5>
        <h5>{{money2}}</h5> <button @click="money2++">赚钱了!</button>
        <ul>
            <li>{{car.name}}</li><button @click="car.name='奥迪'">换车了</button>
            <li>{{car.price}}</li>
            <li>{{car.age}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                money2: this.money,
                a: 2
            }
        },
        // props: ['msg', 'money', 'car']
        props: {
            msg: {
                type: String,
                default: '我是默认信息',
                require: true
            },
            money: {
                type: Number,
                default: 200,
                require: true
            },
            car: {
                type: Object,
                default () {
                    return {
                        name: '小鸟',
                        price: 300,
                        age: 2
                    }
                },
                require: false
            }
        }
    }
</script>

<style scope>
    .student {
        background-color: darkgoldenrod;
        padding: 20px;
    }
</style>